<template>
    <div class="topic" v-if="currExam && currExam.eqId">
        <div class="topic-title">
            <span class="text">{{ currentExamTypeText[currExam.eqType] }}</span>
            <span class="sub-title" v-if="currentScore && currentScore.length > 0">
                （共{{ currentScore[0].eqNum }}道，共{{ currentScore[0].eqTypePercent }}分）
            </span>
        </div>
        <div class="topic-item">
            <div class="topic-item-question">
                <span>{{ examStore.currentExamIndex + 1 }}、</span>
                <span v-html="examStore.getCurrentExam.question.eqContent"></span>
            </div>

            <div
                class="topic-item-answer"
                v-if="
                    examStore.getCurrentExam.eqType === '1' ||
                    examStore.getCurrentExam.eqType === '3'
                "
            >
                <el-radio-group
                    v-model="answer"
                    @change="(val) => handleSingle(val, examStore.getCurrentExam.eqId)"
                >
                    <el-radio
                        v-for="(item, index) in examStore.getCurrentExam.question.questionOptions"
                        :key="index"
                        :value="item.eqoId"
                    >
                        <span v-html="item.eqoContent"></span>
                    </el-radio>
                </el-radio-group>
            </div>
            <div class="topic-item-answer" v-if="examStore.getCurrentExam.eqType === '2'">
                <el-checkbox-group
                    v-model="answerList"
                    @change="(val) => handleMulti(val, examStore.getCurrentExam.eqId)"
                >
                    <el-checkbox
                        v-for="(item, index) in examStore.getCurrentExam.question.questionOptions"
                        :key="index"
                        :value="item.eqoId"
                    >
                        <span v-html="item.eqoContent"></span>
                    </el-checkbox>
                </el-checkbox-group>
            </div>

            <div class="topic-item-answer" v-if="examStore.getCurrentExam.eqType === '4'">
                <div
                    v-for="(item, index) in examStore.getCurrentExam.question.questionOptions"
                    :key="index"
                >
                    <el-input
                        class="tiankong"
                        :max="1000"
                        :key="item.eqId + index"
                        v-model="tiankongAnswer[index]"
                        @change="(val) => inputChange(val, item.eqId)"
                    ></el-input>
                </div>
            </div>
            <div class="topic-item-answer" v-if="examStore.getCurrentExam.eqType === '5'">
                <el-input
                    class="jianda"
                    type="textarea"
                    rows="15"
                    :max="10000"
                    resize="none"
                    :key="examStore.getCurrentExam.eqId"
                    v-model="answer"
                    @change="(val) => textareaChange(val, examStore.getCurrentExam.eqId)"
                ></el-input>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, watchEffect } from 'vue'
import { useExamStore } from '@/stores/exam'

const examStore = useExamStore()
const emits = defineEmits(['selectChange'])

let currentExamTypeText = {
    1: '单选题',
    2: '多选题',
    3: '判断题',
    4: '填空题',
    5: '简答题',
    6: '综合题',
}

let currExam = ref({})
// 当前题目的答案回显
let answer = ref('')
let answerList = ref([])

let tiankongAnswer = ref([])

watchEffect(() => {
    if (examStore.getCurrentExam) {
        if (examStore.getCurrentExam.eqType === '2') {
            let answer = examStore.getCurrentAnswer(examStore.getCurrentExam.eqId)
            if (answer) {
                answerList.value = answer.split(',')
            } else {
                answerList.value = []
            }
        } else if (
            examStore.getCurrentExam.eqType === '1' ||
            examStore.getCurrentExam.eqType === '3' || 
            examStore.getCurrentExam.eqType === '5'
        ) {
            answer.value = examStore.getCurrentAnswer(examStore.getCurrentExam.eqId)
        } else if (examStore.getCurrentExam.eqType === '4') {
            tiankongAnswer.value = []
            let answer = examStore.getCurrentAnswer(examStore.getCurrentExam.eqId)
            if (answer) {
                tiankongAnswer.value = answer.split(',')
            } else {
                examStore.getCurrentExam.question.questionOptions.forEach((item) => {
                    tiankongAnswer.value.push('')
                })
            }
        }
        currExam.value = examStore.getCurrentExam
    }
})

const currentScore = computed(() =>
    examStore.getTestCardInfo.filter((item) => item.eqType === examStore.getCurrentExam.eqType)
)

// 单选处理
function handleSingle(val, eqId) {
    emits('selectChange', {
        eqId: eqId,
        eqoId: val,
    })
}

// 多选处理
function handleMulti(val, eqId) {
    emits('selectChange', {
        eqId: eqId,
        eqoId: val.join(),
    })
}

// 填空处理
function inputChange(val, eqId) {
    emits('selectChange', {
        eqId: eqId,
        eqoId: tiankongAnswer.value.join(),
    })
}

// 简答处理
function textareaChange(val, eqId) {
    emits('selectChange', {
        eqId: eqId,
        eqoId: val,
    })
}
</script>

<style lang="less" scoped>
.topic {
    &-title {
        margin-bottom: 50px;
        color: #333333;
        font-size: 21px;
        .text {
            margin-right: 30px;
            font-weight: 700;
            font-size: 24px;
            color: #333333;
        }
        .sub-title {
            font-weight: 700;
            font-size: 18px;
            color: #999999;
        }
    }
    &-item {
        margin-bottom: 20px;
        &-question {
            display: flex;
            margin-bottom: 32px;
            font-size: 21px;
        }
        &-answer {
            .tiankong {
                margin-bottom: 20px;
                width: 400px;
                height: 40px;
            }
            ::v-deep(.el-radio-group) {
                flex-direction: column;
                align-items: flex-start;
                .el-radio {
                    margin-bottom: 15px;
                }
                .el-radio:last-child {
                    margin-right: 32px;
                }
                .el-radio__label {
                    font-size: 16px;
                }
            }
            ::v-deep(.el-checkbox-group) {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .el-checkbox__label {
                    font-size: 16px;
                }
                .el-checkbox__inner {
                    width: 16px;
                    height: 16px;
                }
                .el-checkbox {
                    margin-bottom: 15px;
                }
            }
        }
    }
}
</style>
